<template>
  <el-drawer v-model="drawerVisible" title="操作列" direction="rtl" size="50%">
    {{ tableData }}
    <el-table :data="tableData" style="width: 100%" v-if="drawerVisible">
      <el-table-column prop="prop" label="配置项">
        <template #default="scope">
          <el-select
            v-model="scope.row.prop"
            :fit-input-width="false"
            filterable
          >
            <template #label="{ value }">
              <span>{{ value }}</span>
            </template>
            <el-option
              v-for="item in EnumDictData"
              :key="item.value"
              :label="item.value + '-' + item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="value" label="值">
        <template #default="scope">
          <fileValue
            v-if="EnumDictData[scope.row.prop]"
            :type="EnumDictData[scope.row.prop].type || 'input'"
            :listData="EnumDictData[scope.row.prop].options"
            :defaultValue="EnumDictData[scope.row.prop].defaultValue"
            v-model="scope.row.value"
          />
        </template>
      </el-table-column>
      <el-table-column prop="label" label="描述">
        <template #default="scope">
          <span v-if="scope.row.prop && EnumDictData[scope.row.prop]">
            {{ EnumDictData[scope.row.prop].label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="action" label="操作">
        <template #default="scope">
          <el-button @click="deleteClick(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-button @click="addClick">新增</el-button>
    </div>
    <template #footer>
      <div style="flex: auto">
        <el-button type="primary" @click="confirmClick">确认</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script setup>
import { EnumDictData } from "./dictData.js";
import fileValue from "./fileValue.vue";
const emit = defineEmits(["change"]);
const drawerVisible = ref(false);
const row = ref({});
const index = ref(null);
const tableData = ref([
  {
    prop: "",
    value: undefined,
  },
]);

const addClick = () => {
  tableData.value.push({});
};
const showModal = (tempRow, tempIndex) => {
  drawerVisible.value = true;
  row.value = tempRow;
  index.value = tempIndex;
  handelTempRow();
};
function handelTempRow() {
  // {
  //   prop: "prop1",
  //   label: "label1",
  //   type: "input",
  //   hide: true,
  //   display: true,
  // }
  tableData.value = Object.keys(row.value).map((item) => {
    return {
      prop: item,
      value: row.value[item],
    };
  });
  console.log("asdfasdfasdf", tableData.value, row.value);
}
function confirmClick() {
  const result = tableData.value.reduce((obj, item) => {
    if (item.prop) {
      obj[item.prop] = item.value;
    }
    return obj;
  }, {});
  console.log(result, index.value);
  emit("change", result, index.value);
  drawerVisible.value = false;
}
function deleteClick(index) {
  tableData.value.splice(index, 1);
}
defineExpose({
  showModal,
});
</script>

<style lang="scss" scoped></style>
